<template>
  <el-tabs v-model="zzfactiveName" @tab-click="zzfhandleClick">
    <el-tab-pane label="中转费对账汇总" name="one">
      <el-row>
        <el-col :span="24">
          <div class="header">
            <el-form ref="pfhzform" :model="zzfhzform" label-width="100px" class="flex-start ">
              <el-form-item label="汇总维度">
                <el-select v-model="zzfhzform.collectDimensionality" placeholder="请选择汇总维度" style="width:200px" @change="zzfhzhd">
                  <el-option label="日汇总" value="1" />
                  <el-option label="月汇总" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="时间范围" prop="pfhztime">
                <el-date-picker v-show="zzfhzform.collectDimensionality==='2'" v-model="zzfhzform.month" value-format="yyyy-MM" type="month" placeholder="选择月" style="width: 400px;" />
                <el-date-picker v-show="zzfhzform.collectDimensionality==='1'" v-model="zzfhzform.time" value-format="yyyy-MM-dd" style="width: 400px;" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期" @change="zzfhzpicker" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="zzfhzcx">查询</el-button>
                <elbutton :obj="zzfhzform" @dj="zzfhzclear" />
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div>
            <elltable ref="multipleTable" :loading="zzfhzloading" :data="zzfhztableData" :th="zzfhzth" :n="3" />
          </div>
        </el-col>

      </el-row>
      <div class="block" style="display: flex; justify-content: flex-end;">
        <pagination :current-page="zzfhzform.pageDate.pageNum" :page-size="zzfhzform.pageDate.pageSize" :total="zzfhztotal" @size-change="zzfhzhandleSizeChange" @current-change="zzfhzhandleCurrentChange" />
      </div>
    </el-tab-pane>
    <el-tab-pane label="中转费对账明细" name="two">
      <el-row>
        <el-col :span="24">
          <div class="header">
            <el-form ref="zlform" :model="zzfmxform" label-width="100px" class="flex-start ">
              <el-form-item label="单号">
                <el-input v-model="zzfmxform.transportCode" placeholder="请输入单号" />
              </el-form-item>
              <el-form-item label="时间范围" prop="zltime">
                <el-date-picker v-model="zzfmxform.Time" value-format="yyyy-MM-dd" style="width: 500px;" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="zzfmxpicker" />
              </el-form-item>
              <el-form-item label="结算重量">
                <el-select v-model="zzfmxform.settleWeight" placeholder="请选择">
                  <el-option label="全部" value="0" />
                  <el-option label="重量为0" value="1" />
                  <el-option label="重量不为0" value="2" />
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="zzfmxcx">查询</el-button>
                <elbutton :obj="zzfmxform" @dj="zzfmxclear" />
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div>
            <elltable ref="multipleTable" :loading="zzfmxloading" :data="zzfmxtableData" :th="zzfmxth" :n="3" />
          </div>
        </el-col>

      </el-row>
      <div class="block" style="display: flex; justify-content: flex-end;">
        <pagination :current-page="zzfmxform.pageDate.pageNum" :page-size="zzfmxform.pageDate.pageSize" :total="zzfmxtotal" @size-change="zzfmxhandleSizeChange" @current-change="zzfmxhandleCurrentChange" />
      </div>
    </el-tab-pane>
  </el-tabs>

</template>
<script>import { Getzzfhztable, Getzzfmxtable } from '@/api/ReconciliationCenter'
export default {
  data() {
    return {
      zzfactiveName: 'one',
      // 中转费汇总
      zzfhzth: [],
      zzfhztotal: 0,
      zzfhzform: {
        collectDimensionality: '1',
        endTime: '',
        month: '',
        pageDate: {
          pageNum: 1,
          pageSize: 1
        },
        startTime: ''
      },
      zzfhzloading: false,
      zzfhztableData: [],
      // 中转费明细
      zzfmxth: [],
      zzfmxtotal: 0,
      zzfmxform: {
        endTime: '',
        pageDate: {
          pageNum: 1,
          pageSize: 1
        },
        settleWeight: '',
        startTime: '',
        transportCode: ''
      },
      zzfmxloading: false,
      zzfmxtableData: []
    }
  },
  methods: {
    zzfhandleClick(tab, event) { },
    // 获取中转费时间
    zzfhzpicker(value) {
      // console.log('??', value)
      if (value == null) {
        this.zzfhzform.startTime = ''
        this.zzfhzform.endTime = ''
      } else {
        this.zzfhzform.startTime = value[0]
        this.zzfhzform.endTime = value[1]
      }
    },
    // 派费汇总维度改变
    zzfhzhd() {
      this.zzfhzform.month = ''
      this.zzfhzform.startTime = ''
      this.zzfhzform.endTime = ''
      if (this.zzfhzform.time) {
        this.zzfhzform.time = []
      }
    },
    // 派费汇总查询
    zzfhzcx() {
      if (this.zzfhzform.startTime === '' && this.zzfhzform.month === '') {
        this.$message('请选择日期')
        return
      }
      this.zzfhzonSubmit()
    },
    async zzfhzonSubmit() {
      this.zzfhzloading = true
      const res = await Getzzfhztable(this.zzfhzform)
      this.zzfhzloading = false
      console.log('中转费汇总', res)
      if (res.code === 200) {
        this.zzfhztableData = res.data.list.data
        this.zzfhztotal = res.data.list.total
        this.zzfhzth = res.data.fields
      } else {
        this.zzfhztableData = []
        this.zzfhztotal = 0
        this.zzfhzth = []
      }
    },
    // 总览分页
    zzfhzhandleSizeChange(val) {
      this.zzfhzform.pageDate.pageSize = val
      this.zzfhzform.pageDate.pageNum = 1
      this.zzfhzcx()
    },
    zzfhzhandleCurrentChange(val) {
      this.zzfhzform.pageDate.pageNum = val
      this.zzfhzcx()
    },

    // 中转费明细查询
    zzfmxcx() {
      if (this.zzfmxform.startTime === '') {
        this.$message('请选择日期')
        return
      }
      this.zzfmxonSubmit()
    },
    async zzfmxonSubmit() {
      this.zzfmxloading = true
      const res = await Getzzfmxtable(this.zzfmxform)
      this.zzfmxloading = false
      console.log('中转费明细', res)
      if (res.code === 200) {
        this.zzfmxtableData = res.data.list.data
        this.zzfmxtotal = res.data.list.total
        this.zzfmxth = res.data.fields
      } else {
        this.zzfmxtableData = []
        this.zzfmxtotal = 0
      }
    },
    // 获取派费明细时间
    zzfmxpicker(value) {
      if (value == null) {
        this.zzfmxform.startTime = ''
        this.zzfmxform.endTime = ''
        return
      }
      this.zzfmxform.startTime = value[0]
      this.zzfmxform.endTime = value[1]
    },
    // 派费明细分页
    zzfmxhandleSizeChange(val) {
      this.zzfmxform.pageDate.pageSize = val
      this.zzfmxform.pageDate.pageNum = 1
      this.zzfmxcx()
    },
    zzfmxhandleCurrentChange(val) {
      this.pfmxform.pageDate.pageNum = val
      this.zzfmxcx()
    },
    // 重置
    zzfhzclear(aaa) {
      this.zzfhzform = aaa
      this.zzfhzform.collectDimensionality = '1'
    },
    zzfmxclear(aaa) {
      this.zzfmxform = aaa
    }
  }
}
</script>

<style>
.flex-start {
  display: flex;
}
</style>
